import React, { Component } from 'react'
import { Card, Table, Modal, message, Button } from 'antd'
import axios from '../../axios/index'
import Utils from '../../utils/utils'


export default class BasicTable extends Component {
    state = {
        dataSource2: [],
        selectedRows: []
    }

    params = {
        page: 1
    }

    componentDidMount() {
        const data = [
            {
                id: '0',
                userName: 'Jack',
                sex: '1',
                state: '1',
                interest: '1',
                birthday: '2008-01-01',
                address: '武汉关谷大道',
                time: '9:00'
            },
            {
                id: '1',
                userName: 'Eicl',
                sex: '2',
                state: '2',
                interest: '3',
                birthday: '2008-01-01',
                address: '武汉汉口海滩',
                time: '9:00'
            },
            {
                id: '2',
                userName: 'Kite',
                sex: '1',
                state: '3',
                interest: '4',
                birthday: '2008-01-01',
                address: '武汉保利花园',
                time: '9:00'
            },
            {
                id: '3',
                userName: 'Wesn',
                sex: '2',
                state: '4',
                interest: '6',
                birthday: '2008-01-01',
                address: '武汉成园小区',
                time: '9:00'
            },
        ]
        data.forEach((item, index) => {
            item.key = index
        })
        this.setState({
            dataSource: data
        })
        this.request();
    }

    // 动态获取mock数据
    request = () => {
        let _this = this
        axios.ajax({
            url: '/table/list',
            data: {
                params: {
                    /* 
                        1. 这里为什么不用state而是用params, 因为state中的变量用来渲染html中dom结构的, 
                        而改变页码不需要渲染dom结构，他只是一个参数一个变量
                        2. 这里的页码木有发生变化，是因为mock数据中定义了page是1，所以接口中返回的一直是
                        第一页，真正调用接口是不会发生这种情况的
                    */
                    page: this.params.page
                }
                // isShowLoading: false
            }
        }).then((res) => {
            if(res.code === 0){
                res.result.list.map((item, index) => item.key = index)
                this.setState({
                    dataSource2: res.result.list,
                    selectedRowKeys: [],
                    selectedRows: [],
                    pagination: Utils.pagination(res, (current) => {
                        // to-do
                        _this.params.page = current
                        this.request()
                    })
                })
            }
        })
    }
    
    onRowClick = (record, index) => {
        let selectKey = [index]
        Modal.info({
            title: '信息',
            content: `用户名：${record.userName}, 爱好：${record.interest}`
        })
        this.setState({
            selectedRowKeys: selectKey,
            selectedItem: record
        })
    }

    // 多选执行删除操作
    handleDelete = () => {
        let rows = this.state.selectedRows
        let ids = []
        rows.forEach((item) => {
            ids.push(item.id)
        })
        Modal.confirm({
            title: '删除提示',
            content: `你确定要删除这些数据吗? ${ids.join(',')}`,
            onOk: () => {
                message.success('删除成功')
                this.request()
            }
        })

    }
    render() {
        const columns = [
            {
                title: 'id',
                dataIndex: 'id',
                key: 'id'
            },
            {
                title: '用户名',
                dataIndex: 'userName',
                key: 'userName'
            },
            {
                title: '性别',
                dataIndex: 'sex',
                key: 'sex',
                render(sex){
                    return sex === 1 ? '男' : '女'
                }
            },
            {
                title: '状态',
                dataIndex: 'state',
                key: 'state',
                render(state) {
                   let config = {
                       '1': '咸鱼一条',
                       '2': '风华才子',
                       '3': '北大才子',
                       '4': '百度FE',
                       '5': '创业者'
                   }
                   return config[state] 
                }
            },
            {
                title: '爱好',
                dataIndex: 'interest',
                key: 'interest',
                render(state){
                    let config = {
                        '1': '唱歌',
                        '2': '下棋',
                        '3': '跑步',
                        '4': '骑行',
                        '5': '跳舞',
                        '6': '书法',
                        '7': '剪纸',
                        '8': '潜水',
                        '9': '打球'
                    }
                    return config[state]
                }
            },
            {
                title: '生日',
                dataIndex: 'birthday',
                key: 'birthday'
            },
            {
                title: '地址',
                dataIndex: 'address',
                key: 'address'
            },
            {
                title: '早起时间',
                dataIndex: 'time',
                key: 'time'
            }
        ]
        const { selectedRowKeys } = this.state
        const rowSelection = {
            type: 'radio',
            selectedRowKeys
        }
        const rowCheckSelection = {
            type: 'checkbox',
            selectedRowKeys,
            onChange: (selectedRowKeys, selectedRows) => {
                // let ids = []
                // selectedRows.map((item) =>{
                //     ids.push(item.id)
                // })
                this.setState({
                    selectedRowKeys,
                    // selectedIds: ids
                    selectedRows
                })
            }
        }
        return(
            <div>
                <Card title="基础表格">
                    <Table 
                        bordered
                        pagination={false}
                        columns={columns} 
                        dataSource={this.state.dataSource}/>
                </Card>
                <Card title="动态数据渲染表格-Mock" style={{margin: '10px 0'}}>
                    <Table 
                        bordered
                        pagination={false}
                        columns={columns} 
                        dataSource={this.state.dataSource2}/>
                </Card>
                <Card title="Mock-单选" style={{margin: '10px 0'}}>
                    <Table 
                        bordered
                        rowSelection={rowSelection}
                        pagination={false}
                        columns={columns}
                        onRow = {(record, index) => {
                            return {
                                onClick: () => {     // 点击行
                                    this.onRowClick(record, index)
                                }, 
                            }
                        }} 
                        dataSource={this.state.dataSource2}/>
                </Card>
                <Card title="Mock-多选" style={{margin: '10px 0'}}>
                    <div style={{marginBottom: 12}}>
                        <Button 
                            disabled={!this.state.selectedRows.length}
                            onClick={this.handleDelete}>删除</Button>
                    </div>
                    <Table 
                        bordered
                        rowSelection={rowCheckSelection}
                        pagination={false}
                        columns={columns}
                        dataSource={this.state.dataSource2}/>
                </Card>
                <Card title="Mock-表格分页" style={{margin: '10px 0'}}>
                    <div style={{marginBottom: 12}}>
                        <Button 
                            disabled={!this.state.selectedRows.length}
                            onClick={this.handleDelete}>删除</Button>
                    </div>
                    
                        
                    
                    <Table 
                        bordered
                        pagination={this.state.pagination}
                        columns={columns}
                        dataSource={this.state.dataSource2}/>
                </Card>
            </div>
        )
    }
}